import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    Press
} from './../../components';

interface Props {
    onCancel?: Function,
    onSetAvatar?: Function,
    onDelete?: Function
}

import * as Const from './../../const';

class Menu extends PureComponent <Props> {

    static defaultProps = {
        onCancel: () => null,
        onTakeCamera: () => null,
        onChooseLibrary: () => null
    }

    getStyle = (color:string) => {
        return [styles.buttonStyle,{
            backgroundColor:color
        }]
    }

    render() {
        const {
            onCancel,
            onSetAvatar,
            onDelete
        } = this.props;

        return (
            <View style={styles.container}>
                <View style={styles.buttons}>
                    <Press
                        onPress={onDelete}
                        style={this.getStyle(Const.color)}
                    >
                        <Text style={styles.buttonText}>
                            Delete of photo
                        </Text>
                    </Press>
                    <Press
                        onPress={onSetAvatar}
                        style={this.getStyle(`#AA00FF`)}
                    >
                        <Text style={styles.buttonText}>
                            Set as Avatar
                        </Text>
                    </Press>
                    <Press
                        onPress={onCancel}
                        style={styles.cancelButton}
                    >
                        <Text style={styles.cancelText}>
                            Cancel
                        </Text>
                    </Press>
                </View>
            </View>
        )
    }
}

export default Menu;

const styles = StyleSheet.create({
    container: {
        paddingHorizontal:16,
        backgroundColor: `#323541`
    },
    buttons: {
        paddingTop:24,
        paddingBottom:20
    },
    buttonStyle: {
        height: 40,
        borderRadius:8,
        marginBottom: 16,
        alignItems: `center`,
        justifyContent: `center`,
        backgroundColor: `#fff`
    },
    buttonText: {
        fontSize: 16,
        color:`#fff`,
        fontFamily:Const.fontFamily
    },
    cancelButton:{
        height:40,
        alignItems:`center`,
        justifyContent:`center`
    },
    cancelText:{
        fontSize: 16,
        color:`#fff`,
        fontFamily:Const.fontFamily
    }
}) as any;